<template>
  <div class="notice_con">
    <template v-if="noticList.length > 0">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoadList">
        <div class="notice_li" v-for="item in noticList" :key="item.id" @click="goDetail(item)">
          <div class="notice_li_tit">
            <span>
              {{ item.noticeName }}
              <i class="iconfont icon-dian-copy" v-if="item.isRead === '0'"></i>
            </span>
          </div>
          <div class="notice_li_label">
            <span class="label_type">{{ item.busSign }}</span>
            <span class="label_line">|</span>
            <span class="label_time">{{ item.createTime }}</span>
          </div>
        </div>
      </van-list>
    </template>
    <van-empty description="暂无数据" v-else></van-empty>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getListNoticesByType, updateNoticeRead } from '@api/api.js'
import { smEncrypt } from '@/common/units.js'
export default {
  name: 'writeNotificationList',
  components: {},
  props: {
    type: String,
  },
  data() {
    return {
      noticList: [],
      currentPage: 1,
      pageSize: 20,
      noticListTotal: 0,
      loading: false,
      finished: false,
      noticeType: 0,
      unRead: '',
    }
  },
  computed: {
    ...mapGetters(['messageOneNum']),
  },
  watch: {
    messageOneNum: {
      handler(news) {
        this.unRead = news
      },
      deep: true,
    },
  },
  created() {},
  mounted() {
    this.unRead = this.messageOneNum
    this.onLoadList()
  },
  methods: {
    // 获取待办列表方法
    onLoadList() {
      let dataObj = {
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        param: {
          isRead: '',
          noticeType: this.type,
        },
      }
      let encryData = smEncrypt(dataObj)
      getListNoticesByType(dataObj)
        .then(res => {
          const data = res.data
          this.noticList.push(...data.content)
          this.noticListTotal = data.totalSize
          this.currentPage++
          this.loading = false
          if (this.noticList.length === this.noticListTotal) {
            this.finished = true
          }
        })
        .catch(err => {
          this.loading = false
          this.finished = true
        })
    },
    goDetail(item) {
      let urlStr = item.url || ''
      if (item.url && item.url.includes('evaluationManage')) {
        urlStr = item.url.replace('evaluationManage', 'evaluationManageSum')
      }
      if (['会议管理'].includes(item.busSign)) {
        urlStr = item.url.replace('meet', 'meetDetail')
      }
      if (item.isRead == 0) {
        updateNoticeRead({
          id: item.id,
        }).then(res => {
          let num = this.unRead - 1
          if (num >= 0) {
            this.$store.commit('setMessageOneNum', num)
          }
          if (['ORG_MODIFY_RANK'].includes(this.type)) {
            item.isRead = '1'
            this.$toast.fail('请前往PC端进行相关操作')
            return
          }
          if (['rckq'].includes(this.type) && urlStr.indexOf('type=5') !== -1) {
            item.isRead = '1'
            this.$toast.fail('请前往PC端进行相关操作')
            return
          }
          if (item.url) {
            this.$router.push({
              path: urlStr,
              query: {
                isEnd: true,
              },
            })
          } else {
            item.isRead = '1'
          }
        })
      } else {
        if (['ORG_MODIFY_RANK'].includes(this.type)) {
          this.$toast.fail('请前往PC端进行查看')
          return
        }
        if (['rckq'].includes(this.type) && urlStr.indexOf('type=5') !== -1) {
          this.$toast.fail('请前往PC端进行查看')
          return
        }
        this.$router.push({
          path: urlStr,
          query: {
            isEnd: true,
          },
        })
      }
    },
    clear() {
      this.noticList.forEach(item => {
        item.isRead = '1'
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.notice_con {
  padding: 8px 16px;
  position: relative;

  .notice_li {
    display: flex;
    flex-direction: column;
    padding: 16px 0;
    &:not(:last-of-type) {
      border-bottom: 1px solid #efefef;
    }
    .notice_li_tit {
      font-size: 13px;
      color: #333333;
      margin-bottom: 8px;
      span {
        display: inline-block;
        position: relative;
        .icon-dian-copy {
          position: absolute;
          right: -8px;
          top: -5px;
          // font-size: 14px;
          color: #ee0a24;
        }
      }
    }
    .notice_li_label {
      font-size: 12px;
      .label_type {
        color: #a57d60;
      }
      .label_line {
        color: #999999;
        margin: 0 8px;
      }
      .label_time {
        font-size: 12px;
        color: #999999;
      }
    }
  }
}
</style>
